<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>curvyCorners - Tab demo</title>
<meta name="author" content="CPKS"/>
<!--[if IE]><meta http-equiv="content-type" content="text/html; charset=UTF-8" /><![endif]-->
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
<meta http-equiv="Content-Style-Type" content="text/css"/>
<style type="text/css">/*<![CDATA[*/
body {
  width:90%;
  margin:0 auto;
  padding:0;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#page0 pre {
  background:#DDD;
  border:dashed #A00 1px;
  padding-left:1em;
}
/* tab styles */
#tabrow {
 margin:0;
 padding-left:1ex;
 min-width:800px;
 font-size:small;
 letter-spacing:0.3pt;
 line-height:1;
 height:24px;
}

#tabrow ul {
  margin:0;
  padding:0;
  list-style:none;
  position:absolute;
  z-index:2;
}

#tabrow li {
  float:left;
  background-color:#F7B10F;
  color:#000;
  margin-right:5px;
  padding:5px;
  border-radius:5px 5px 0 0;
  -webkit-border-top-left-radius:5px;
  -webkit-border-top-right-radius:5px;
  -moz-border-radius:5px 5px 0 0;
  border-top:solid #96460F 1px;
  border-left:solid #96460F 1px;
  border-right:solid #96460F 1px;
  border-bottom-width:0;
  border-bottom-color:transparent;
  cursor:pointer;
}

#tabrow li.select {
 background-color:#FFF6D5;
 color:#763509;
 height:14px;
}

/* page styles */
#topbox, #midbox {
  width:100%;
  border-radius:5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
#topbox {
  background-color:#FFF1C7;
  border: solid #96460F 1px;
  margin-bottom:2em;
}
#midbox {
  border: solid #96460F 1px;
  background-color:#FFF6D5;
}
#midbox p {
  margin:0;
  padding-bottom:1ex;
}
h1 {
  font-size:x-large;
  color:#d18846;
}
h2 {
  color:#000;
  font-size:large;
  font-family:Arial, Helvetica, sans-serif;
}
h1, #topbox h2 {
  margin:0 15pt;
  padding: 5pt 0;
}
div.subpage {
  padding:1em;
}
/* styles for the demo sub-pages */
#demo2 {
  margin: 0.5in auto;
  border: 0px solid #fff;
  color: #fff;
  width: 60%;
  padding: 20px;
  text-align: left;
  background-color: #33F;
  border: 3px solid #fff;

  background-image: url(backrepeat.jpg);
  background-repeat: repeat-x;
  border-radius:20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}
#demo3 {
  margin: 20px auto;
  color: #fff;
  width: 500px;
  height: 550px;
  padding-left:2em;
  background-image: url(backtest.jpg);
  background-repeat: no-repeat;
  border-radius:20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}
#demo4 {
  margin: 0.2in auto;
  color: #fff;
  width: 60%;
  padding: 20px;
  text-align: left;
  background-color: #33F;
  border-radius:20px 0;
  -webkit-border-bottom-right-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius: 20px 0;
}
.demo5 {
  margin: 0 auto;
  color: #fff;
  width: 300px;
  padding: 20px;
  text-align: left;
  background-color: #f00;
  border: 3px solid #000;
  margin-bottom: 10px;
  border-radius:20px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
}

.box2{
  background-color: #0f0;
  text-align:center;
}

.box3{
  background-color: #00f;
  text-align:right;
}

/*]]>*/
</style>
<script type="text/javascript" src="../curvycorners.src.js"> </script>
<script type="text/javascript">//<![CDATA[
var selectedTab = 0;

function tabclick(n) {
  if (n === selectedTab) return; // nothing to do.
  curvyCorners.setWinResize(false); // for IE, block spurious window resize events 
  var li = document.getElementById('tab' + selectedTab);
  curvyCorners.adjust(li, 'className', ''); // Remove the 'select' style
  li = document.getElementById('page' + selectedTab);
  li.style.display = 'none';                // hide the currently selected sub-page
  li = document.getElementById('page' + n);
  li.style.display = 'block';               // show the new sub-page
  li = document.getElementById('tab' + n);  // get the new (clicked) tab
  curvyCorners.adjust(li, 'className', 'select'); // and update its style
  curvyCorners.redraw();        // Redraw all elements with className curvyRedraw
  selectedTab = n;              // store for future reference
  curvyCorners.setWinResize(true); // OK, allow genuine resize events now
}

curvyCorners.addEvent(window, 'resize', new Function('curvyCorners.handleWinResize();'));
//]]>
</script>
</head>
<body>
<div id="topbox">
<h1>curvyCorners Tab demo</h1>
<h2>View the source to see how the tab row is constructed.</h2>
</div>
<div id="tabrow">
 <ul>
  <li id="tab0" onclick="tabclick(0);" class="select curvyRedraw">Intro</li>
  <li id="tab1" onclick="tabclick(1);" class="curvyRedraw">RepeatX</li>
  <li id="tab2" onclick="tabclick(2);" class="curvyRedraw">Photo background</li>
  <li id="tab3" onclick="tabclick(3);" class="curvyRedraw">Opposite corners</li>
  <li id="tab4" onclick="tabclick(4);" class="curvyRedraw">Text alignment</li>
  <li id="tab5" onclick="tabclick(5);" class="curvyRedraw">Tab 6</li>
 </ul>
</div>
<div id="midbox" class="curvyRedraw">
<div id="page0" class="subpage">
<p>These demos show how curvyCorners copes in a more complex styling
environment, where units are expressed in font-relative or real-world units.</p>
<p>Note that the tabs above have fluid width. curvyCorners can cope with both
fixed-width and fluid boxes.</p>
<p>The contents of this page area will change depending on which tab you click.
This is accomplished by a piece of javascript which hides the currently
selected page area, sets the tab styles to reflect the new current tab,
calls curvyCorners to re-draw the tabs, and finally un-hides the appropriate
new page area.</p>
<p>In a little more detail: whenever a box needs to be redrawn (perhaps because
its contents will change, or because it needs to be re-styled), this must be
indicated by using the special class name "curvyRedraw". Then, if properties
are to be changed on one of the redrawable objects, this can be done as
follows:</p>
<pre><code>curvyCorners.adjust(DOMobject, 'propertyname', 'newvalue');
</code></pre>
<p>Finally, a call to <code>curvyCorners.redraw()</code> will redraw all the
redrawable objects on the page. In this demo, all the tab boxes, and the
lower main box, are all redrawn when a tab is clicked.</p>
<p>Here's the script for this page:</p>
<pre><code>
var selectedTab = 0;

function tabclick(n) {
  if (n === selectedTab) return; // nothing to do.
  var li = document.getElementById('tab' + selectedTab);
  curvyCorners.adjust(li, 'className', ''); // Remove the 'select' style
  li = document.getElementById('page' + selectedTab);
  li.style.display = 'none';                // hide the currently selected sub-page
  li = document.getElementById('page' + n);
  li.style.display = 'block';               // show the new sub-page
  li = document.getElementById('tab' + n);  // get the new (clicked) tab
  curvyCorners.adjust(li, 'className', 'select'); // and update its style
  curvyCorners.redraw();        // Redraw all elements with className curvyRedraw
  selectedTab = n;              // store for future reference
}
</code></pre>
</div>
<div id="page1" class="subpage" style="display:none">
<h2>Page 2</h2>
<div id="demo2">
<p>This is the styling for the &lt;div&gt; on this page:</p>
<pre>margin: 0.5in auto;
border: 0px solid #fff;
color: #fff;
width: 60%;
padding: 20px;
text-align: left;
background-color: #33F;
border: 3px solid #fff;

background-image: url(backrepeat.jpg);
background-repeat: repeat-x;
border-radius:20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
</pre>
<p>Note that the background repeats, and that the box is styled
with a percentage value.</p>
</div>
</div>
<div id="page2" class="subpage" style="display:none">
<h2>Page 3</h2>
<div id="demo3"><p>Style for this div:</p>
<pre><code>margin: 20px auto;
color: #fff;
width: 500px;
height: 550px;
padding-left:2em;
background-image: url(backtest.jpg);
background-repeat: no-repeat;
border-radius:20px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
</code></pre></div>
<p>The photo is cropped because of the fixed box size.</p>
</div>
<div id="page3" class="subpage" style="display:none">
<h2>Page 4</h2>
<div id="demo4">
<p>This is the styling for this div:</p>
<pre><code>  margin: 0.2in auto;
  color: #fff;
  width: 60%;
  padding: 20px;
  text-align: left;
  background-color: #33F;
  border-radius:20px 0;
  -webkit-border-bottom-right-radius: 20px;
  -webkit-border-top-left-radius: 20px;
  -moz-border-radius: 20px 0;
</code></pre>
<p>You don't have to round all the corners of a box. There are some constraints,
mostly common sense, about box styling.
For example, it makes no sense to style a box
with rounded top corners, a top border but no side border; and the results
can be relied upon to look odd!</p>
<p>You can of course have rounded top corners with
a border to left, top and right (but none on the bottom).
That is how the tabs are styled.</p>
</div>
</div>
<div id="page4" class="subpage" style="display:none">
<h2>Page 5</h2>
  <div class="demo5">Left aligned</div>
  <div class="demo5 box2">Centred</div>
  <div class="demo5 box3">Right aligned</div>
<p>These boxes have fluid height and fixed width. curvyCorners correctly
applies text alignment styles.</p>
</div>
<div id="page5" class="subpage" style="display:none">
<h2>Page 6</h2>
<p>We hope you find these demonstrations helpful.</p>
<p>For further information about curvyCorners, visit the
<a href="http://curvycorners.net/">web site</a>.</p>
<p>Latest builds are available from the repository at
<a href="http://code.google.com/p/curvycorners/">Google Code</a>.</p>
<p>And please, if you use curvyCorners on a commercial basis,
make a donation!</p>
</div>

</div>
</body>
</html>
